<template>
    <el-dialog v-model="state.show" :title="state.title" width="600px" destroy-on-close @closed="onClosed">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" @submit.prevent>
            <el-form-item v-if="state.child" label="所属类目" style="margin-bottom: 15px">
                <div class="what">{{ state.parentName }}</div>
            </el-form-item>
            <el-form-item label="类目名称" prop="name" :style="{ marginBottom: state.marginBottom }">
                <el-input
                    maxlength="20"
                    v-model.trim="form.name"
                    clearable
                    :placeholder="`请输入${state.labelName}`"
                    show-word-limit />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="state.show = false">取消</el-button>
            <el-button type="primary" @click="onConfirm(formRef)"> 确定 </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import request from '@/request';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
const props = defineProps({
    list: { type: Array, default: () => [] }
});
const emit = defineEmits(['confirm']);
const state = reactive({
    show: false,
    title: '',
    level: 1,
    parentName: '',
    labelName: '',
    child: false,
    marginBottom: '52px'
});

const formRef = ref(null);
const form = reactive({
    name: ''
});
const rules = {
    name: [
        { required: true, message: '请输入分组名称', trigger: ['blur', 'change'] },
        { min: 1, max: 20, message: '分组名称不可超过20个字符', trigger: 'blur' }
    ]
};
const onClosed = () => {
    form.name = '';
};
const closeHandle = message => {
    state.show = false;
    ElMessage.success(message);
    emit('success');
};
const add = async () => {
    const params = { pid: form.id, name: form.name };
    await request('createGoodsClass', params);
    const message = state.child ? '新增子类目成功' : '新增类目成功';
    closeHandle(message);
};
const edit = async () => {
    const params = { id: form.id, name: form.name };
    await request('editGoodsClass', params);
    const message = state.child ? '编辑子类目成功' : '编辑类目成功';
    closeHandle(message);
};
const onConfirm = async formEl => {
    if (!formEl) return;
    await formEl.validate();
    state.type === 'add' ? add() : edit();
};
const openDialog = query => {
    state.type = query.type;
    state.child = query.child;
    state.parentName = query.parentName;
    state.marginBottom = query.child ? '15px' : '52px';
    form.id = query.id;
    if (query.type === 'add') {
        state.title = query.child ? '新增子类目' : '新增类目';
        state.labelName = query.child ? '子类目名称' : '类目名称';
        rules.name[0].message = `请输入${state.labelName}`;
    }
    if (query.type === 'edit') {
        state.title = query.child ? '编辑子类目' : '编辑类目';
        state.labelName = query.child ? '子类目名称' : '类目名称';
        rules.name[0].message = `请输入${state.labelName}`;
        form.name = query.name;
    }
    state.show = true;
};
defineExpose({
    openDialog
});
</script>
<style lang="scss" scoped>
:deep(.el-form-item__error) {
    margin-top: 4px;
}
.what {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #33302d;
    line-height: 18px;
}
</style>
